<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="自动归档" name="first">
        <wise-crud ref="wise-crud" :urls="urls" :fields="fields" :handle="handle" :filters="filters">
          <template v-slot:handle="slotProps">
            <el-button type="info" size="small" class="activeBtn" round @click.native.prevent="viewHandle(slotProps.row)">查看
            </el-button>
            <el-button
              type="info"
              size="small"
              class="activeBtn"
              round
              @click.native.prevent="downloadHanlde(slotProps.row)"
            >
              下载动火方案
            </el-button>
          </template>
        </wise-crud>
      </el-tab-pane>
      <el-tab-pane label="手动归档" name="second">
        <Artificial v-if="activeName==='second'" :type="7" />
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="查看" :visible.sync="dialog" width="50%">
      <HotPlanTable ref="table" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button
          v-print="{
            id: 'printMe',
            popTitle: ''
          }"
          type="primary"
        >打 印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import WiseCrud from '@/components/Crud/wiseCrud'
import {
  downloadHandle,
  postHandle
} from '@/api'
import {
  dateFormat
} from '../../../../filters'
import HotPlanTable from './table/HotPlanTable'
import Artificial from './components/Artificial.vue'
export default {
  name: 'WarehouseManage',
  components: {
    WiseCrud,
    HotPlanTable,
    Artificial
  },
  data() {
    return {
      activeName: 'first',
      handle: [],
      urls: {
        list: '/api/v1/welder-sbtx-second/project-info-comb/get-project-by-hot-program'
      },
      fields: [{
        label: '动火方案',
        prop: 'name',
        type: 'text',
        use: ['table']
      },
      {
        label: '动火申请单位',
        prop: 'hotApplyUnit',
        type: 'text',
        use: ['table']
      },
      {
        label: '动火作业时间',
        prop: 'construction',
        type: 'render',
        use: ['table'],
        tableRender: (h, row, index) => {
          return h('div', this.timeHandle(row))
        }
      },
      {
        label: '基层站长负责人',
        prop: 'workAdminUserName',
        type: 'text',
        use: ['table']
      },
      {
        label: '动火作业级别',
        prop: 'hotLevel',
        type: 'text',
        use: ['table']
      },
      {
        label: '动火作业地点',
        prop: 'hotPlace',
        type: 'text',
        use: ['table']
      },
      {
        label: '动火作业单位负责人',
        prop: 'hotWorkUnitAdmin',
        type: 'text',
        use: ['table']
      },
      {
        label: '动火作业单位监护人',
        prop: 'hotWorkUnitGuardian',
        type: 'text',
        use: ['table']
      },
      {
        label: '操作',
        type: 'handle',
        use: ['table'],
        handle: [],
        tableWidth: 200
      }
      ],
      dialog: false
    }
  },
  computed: {
    spaceId() {
      return this.$store.getters.spaceId
    },
    filters() {
      return [{
        field: 'spaceId',
        operator: 'EQUALS',
        value: this.spaceId
      }]
    }
  },
  methods: {
    downloadHanlde({
      fileUrl
    }) {
      if (!fileUrl) {
        return '暂无动火方案下载'
      }
      let urlArr = fileUrl.split(';')
      let fileUrlArr = urlArr.map(fileUrl => process.env.VUE_APP_BASE_URL + process.env.VUE_APP_FILE_PATH + fileUrl)
      downloadHandle(process.env.VUE_APP_DOWNLOAD_URL, {
        obj: {
          url: fileUrlArr.join(',')
        }
      }).then(res => {
        let disposition = res.headers['content-disposition'].replace(/\"/g, '').split('=')
        let fileName = decodeURI(disposition[disposition.length - 1])
        let blob = new Blob([res.data], {
          type: res.data.type
        })
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        downloadElement.download = fileName // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放blob对象
      })
    },
    timeHandle({
      hotWorkStartTime,
      hotWorkEndTime
    }) {
      if (hotWorkStartTime && hotWorkEndTime) {
        return dateFormat(hotWorkStartTime, 'YYYY-MM-DD') + '至' + dateFormat(hotWorkEndTime, 'YYYY-MM-DD')
      } else {
        return
      }
    },
    viewHandle({
      id
    }) {
      this.getObjectId(id)
      this.dialog = true
    },
    getObjectId(id) {
      postHandle(`/api/v1/welder-sbtx-second/hot-program-comb/show/${id}`).then(res => {
        this.$refs['table'].obj = res.result
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid;
    text-align: left;

    td {
      line-height: 18px;
      border: 1px solid;
      padding: 7px;
    }

    td:nth-child(odd) {
      width: 20%;
    }
  }
</style>
